<template>
  <div class="new-tab-page large parkinglot-wrapper">
    <div class="page-main-title">
      车场配置-编辑车场配置
      <i class="return-icon" @click="back"></i>
    </div>
    <div class="main-content" v-if="operatorParkConfigInfo">
      <el-form
        label-width="120px"
        size="small"
        label-position="left"
        class="edit-feature-form"
        :model="operatorParkConfigInfo"
        ref="operatorParkConfigInfo"
      >
        <div class="feature-item" v-if="operatorParkConfigInfo.parkCloudDetailVo">
          <div class="item-top">
            <el-checkbox
              v-model="operatorParkConfigInfo.parkCloudDetailVo.openFullLimit"
              @change="limitChange"
            >满位限行</el-checkbox>
          </div>
          <div class="item-bd" v-if="operatorParkConfigInfo.parkCloudDetailVo.openFullLimit">
            <div class="parkingData-info">
              <div class="info-item">
                <div class="top-title">在场临时车/在场总车辆</div>
                <div
                  class="data"
                >{{ operatorParkConfigInfo.limitVo.currentTemp }}/{{ operatorParkConfigInfo.limitVo.total }}</div>
              </div>

              <div class="info-item">
                <div class="top-title">临时车剩余车位/总剩余车位</div>
                <div
                  class="data"
                >{{ operatorParkConfigInfo.limitVo.tempLeft }}/{{ operatorParkConfigInfo.limitVo.totalLeft }}</div>
              </div>
            </div>
            <div class="form-box edit-feature-form-box">
              <div class="el-form--inline zb-inline-form">
                <el-checkbox
                  v-model="operatorParkConfigInfo.limitVo.openFullLimit"
                  @change="openFullLimitChange"
                ></el-checkbox>
                <el-form-item
                  label="总车位满位限行"
                  label-width="120px"
                  prop="limitVo.fullLimitCount"
                  :rules="{
                    required: true,
                    message: '不能为空',
                    trigger: 'blur'
                  }"
                >
                  <el-input
                    type="number"
                    placeholder="输入可进入的总车辆数"
                    v-model.number="operatorParkConfigInfo.limitVo.fullLimitCount"
                    v-if="operatorParkConfigInfo.limitVo.openFullLimit"
                  ></el-input>
                </el-form-item>
              </div>

              <div class="el-form--inline zb-inline-form">
                <el-checkbox
                  v-model="operatorParkConfigInfo.limitVo.openNormalLimit"
                  @change="otherLimiteChange"
                ></el-checkbox>

                <el-form-item
                  label="临时车满位限行"
                  label-width="120px"
                  prop="limitVo.normalLimitCount"
                  :rules="{
                    required: true,
                    message: '不能为空',
                    trigger: 'blur'
                  }"
                >
                  <el-input
                    type="number"
                    placeholder="输入可进入的临时车辆数"
                    v-model.number="operatorParkConfigInfo.limitVo.normalLimitCount"
                    v-if="operatorParkConfigInfo.limitVo.openNormalLimit"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="el-form--inline zb-inline-form">
                <el-checkbox
                  v-model="operatorParkConfigInfo.limitVo.openVipLimit"
                  @change="otherLimiteChange"
                ></el-checkbox>
                <el-form-item
                  label="VIP车满位限行"
                  label-width="120px"
                  prop="limitVo.vipLimitCount"
                  :rules="{
                    required: true,
                    message: '不能为空',
                    trigger: 'blur'
                  }"
                >
                  <el-input
                    type="number"
                    placeholder="输入可进入的VIP车辆数"
                    v-model.number="operatorParkConfigInfo.limitVo.vipLimitCount"
                    v-if="operatorParkConfigInfo.limitVo.openVipLimit"
                  ></el-input>
                </el-form-item>
              </div>
            </div>

            <div class="tips-box">
              <div class="tips-item">* 总车位满位限行：当在场的总车辆数大于XX时，限制车辆进入</div>
              <div class="tips-item">* 临时车满位限行：当在场的临时车车辆数大于XX时，限制车辆进入</div>
              <div class="tips-item">* VIP车满位限行：当在场的VIP车辆数大于XX时，限制车辆进入</div>
            </div>
          </div>
        </div>

        <div class="feature-item" v-if="operatorParkConfigInfo.parkCloudDetailVo">
          <div class="item-top">
            <el-checkbox v-model="operatorParkConfigInfo.parkCloudDetailVo.openFuzzyMatch">模糊匹配</el-checkbox>
          </div>
          <div class="item-bd" v-if="operatorParkConfigInfo.parkCloudDetailVo.openFuzzyMatch">
            <div class="tips-box">
              <div class="tips-item">
                *
                若开启模糊匹配，车辆离场时系统未找到其在场纪录，将查询与出场车牌相差一位的进场记录，能且只能找到一条符合的在场记录时，系统自动进行模糊匹配，身份相同时取信置信度高的结果，身份不同时取信VIP记录。
              </div>
            </div>
          </div>
        </div>

        <div class="feature-item">
          <div class="item-top">
            <el-checkbox
              v-model="operatorParkConfigInfo.parkCloudDetailVo.carNoForceCovertFlag"
              @change="carNoForceCovertFlagChange"
            >车牌强制转换</el-checkbox>
          </div>
          <div class="item-bd">
            <div class="tips-box">
              <div class="tips-item">* 若开启车牌强制转换，车牌识别时，若识别成已配置的需强转的相近车牌，则系统会自动将转换为已配置的正确车牌</div>
            </div>
            <div
              class="transform-license-plate"
              v-if="operatorParkConfigInfo.parkCloudDetailVo.carNoForceCovertFlag"
            >
              <div class="top-action">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="small"
                  @click="addCarNoForceCovert"
                >新增</el-button>
                <el-input
                  placeholder="请输入车牌号"
                  clearable
                  size="small"
                  v-model.trim="forceCovertSearchVal"
                >
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>

              <div class="transform-license-plate-bd forceCovertConfigVoList-box">
                <div
                  class="transform-item"
                  v-for="(item, index) in operatorParkConfigInfo.parkCarNoForceCovertConfigVoList"
                  v-show="((!isShowMore && index < 3) || isShowMore) && item.isShow"
                >
                  <div class="left-bd">
                    <el-form-item
                      label="正确车牌"
                      label-width="60px"
                      :prop="'parkCarNoForceCovertConfigVoList.' + index + '.covertDestCarNo'"
                      :rules="{
                        validator: validateCovertDestCarNo,
                        trigger: 'blur'
                      }"
                      :class="{ 'is-search-item': item.isActive && forceCovertSearchVal }"
                    >
                      <el-input v-model="item.covertDestCarNo"></el-input>
                    </el-form-item>
                  </div>
                  <div class="mid-bd">
                    <div class="mid-title">相近车牌</div>
                    <div class="mid-mian-content">
                      <el-form-item
                        label
                        label-width="0px"
                        v-for="(citem, cindex) in item.covertSrcCarNo"
                        class="transform-input-item"
                        :prop="
                          'parkCarNoForceCovertConfigVoList.' + index + '.covertSrcCarNo.' + cindex + '.carLicensePlate'
                        "
                        :rules="{
                          validator: validateCovertSrcCarNo,
                          trigger: 'blur'
                        }"
                        :class="{ 'is-search-item': citem.isActive && forceCovertSearchVal }"
                      >
                        <el-input v-model="citem.carLicensePlate"></el-input>
                        <a
                          href="javascript:;"
                          class="remove-btn"
                          v-if="cindex > 0"
                          @click="removeCovertSrcCarNo(item.covertSrcCarNo, cindex)"
                        ></a>
                      </el-form-item>
                      <a
                        href="javascript:;"
                        class="add-btn"
                        v-if="item.covertSrcCarNo.length < 4"
                        @click="addCovertSrcCarNo(item.covertSrcCarNo)"
                      ></a>
                    </div>
                  </div>
                  <a
                    href="javascript:;"
                    class="del-icon"
                    @click="
                      removeparkCarNoForceCovertConfigVoItem(
                        operatorParkConfigInfo.parkCarNoForceCovertConfigVoList,
                        index,
                        item
                      )
                    "
                  >
                    <i class="el-icon-close"></i>
                  </a>
                </div>
              </div>
              <div
                class="show-bar"
                v-if="
                  !isShowMore &&
                    operatorParkConfigInfo.parkCarNoForceCovertConfigVoList.length > 3 &&
                    !forceCovertSearchVal.length
                "
                @click="isShowMore = true"
              >
                <i class="el-icon-arrow-down"></i>展开更多
              </div>
              <div
                class="hide-bar"
                v-else-if="
                  isShowMore === true &&
                    operatorParkConfigInfo.parkCarNoForceCovertConfigVoList.length > 3 &&
                    !forceCovertSearchVal.length
                "
                @click="isShowMore = false"
              >
                <i class="el-icon-arrow-up"></i>收起
              </div>
            </div>
          </div>
        </div>

        <div class="feature-item" v-if="operatorParkConfigInfo.parkCloudDetailVo">
          <div class="item-top">
            <div class="item-top-item">
              <el-checkbox
                v-model="operatorParkConfigInfo.parkCloudDetailVo.enterReleaseReasonStatus"
              >入口放行原因配置</el-checkbox>
            </div>

            <div class="item-top-item">
              <el-checkbox
                v-model="operatorParkConfigInfo.parkCloudDetailVo.leaveReleaseReasonStatus"
              >出口放行原因配置</el-checkbox>
            </div>
          </div>

          <div class="tips-box">
            <div class="tips-item">* 出口放行原因配置：可根据实际情况预设进场登记放行原因和离场异常放行原因</div>
          </div>

          <div class="reasons-box" v-if="operatorParkConfigInfo.parkCloudDetailVo">
            <div class="reasons-box-item">
              <div
                class="reasons-item"
                v-if="operatorParkConfigInfo.parkCloudDetailVo.enterReleaseReasonStatus"
              >
                <div
                  class="reason-cell-item"
                  v-for="(item, index) in operatorParkConfigInfo.checkInReason"
                  :key="index"
                >
                  <el-form-item
                    :label="`原因${index + 1}`"
                    label-width="60px"
                    class="reason-item"
                    v-if="item.isDelete !== 1"
                    :prop="'checkInReason.' + index + '.reasonContent'"
                    :rules="{
                      required: true,
                      message: '原因不能为空',
                      trigger: 'blur'
                    }"
                  >
                    <el-input placeholder v-model="item.reasonContent"></el-input>
                  </el-form-item>
                  <a
                    href="javascript:;"
                    class="del-icon"
                    @click="delInReason(item, operatorParkConfigInfo.checkInReason, index)"
                  >
                    <i class="el-icon-close"></i>
                  </a>
                </div>

                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="small"
                  v-if="operatorParkConfigInfo.checkInReason.length <= 6"
                  @click="addInReason(operatorParkConfigInfo.checkInReason)"
                >原因</el-button>
              </div>
            </div>

            <div class="reasons-box-item">
              <div
                class="reasons-item"
                v-if="operatorParkConfigInfo.parkCloudDetailVo.leaveReleaseReasonStatus"
              >
                <div
                  class="reason-cell-item"
                  v-for="(item, index) in operatorParkConfigInfo.checkOutReason"
                  :key="index"
                >
                  <el-form-item
                    :label="`原因${index + 1}`"
                    label-width="60px"
                    class="reason-item"
                    v-if="item.isDelete !== 1"
                    :prop="'checkOutReason.' + index + '.reasonContent'"
                    :rules="{
                      required: true,
                      message: '原因不能为空',
                      trigger: 'blur'
                    }"
                  >
                    <el-input placeholder v-model="item.reasonContent"></el-input>
                  </el-form-item>
                  <a
                    href="javascript:;"
                    class="del-icon"
                    @click="delOutReason(item, operatorParkConfigInfo.checkOutReason, index)"
                  >
                    <i class="el-icon-close"></i>
                  </a>
                </div>
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="small"
                  v-if="operatorParkConfigInfo.checkOutReason.length <= 6"
                  @click="addOutReason(operatorParkConfigInfo.checkOutReason)"
                >原因</el-button>
              </div>
            </div>
          </div>
        </div>

        <div class="feature-item" v-if="operatorParkConfigInfo.parkCloudDetailVo">
          <div class="item-top">
            <el-radio-group v-model="operatorParkConfigInfo.parkCloudDetailVo.offlineReleaseModel">
              <el-radio :label="1">离线自动放行</el-radio>
              <el-radio :label="0">离线手动放行</el-radio>
            </el-radio-group>
          </div>
          <div class="item-bd">
            <div class="tips-box">
              <div class="tips-item">
                *
                离线放行模式：设备离线状态下，手动放行则只能由收费员手动开闸放行；自动放行则标记车辆欠费并自动开闸放行。
              </div>
            </div>
          </div>
        </div>

        <div class="feature-item last">
          <div class="item-top zb-form no-test" v-if="operatorParkConfigInfo.parkCloudDetailVo">
            <el-form-item label="在场车辆统计范围" label-width="126px" class="short-input-item mb0">
              <el-input
                type="number"
                placeholder
                v-model.number="operatorParkConfigInfo.parkCloudDetailVo.parkingCarStatRange"
              ></el-input>
            </el-form-item>
            <span class="unit">
              小时 统计
              <span
                style="display: inline-block; margin: 0 5px; color: #6fc80d"
              >{{ operatorParkConfigInfo.parkCloudDetailVo.parkingCarStatRange }}小时</span>内的在场车辆数
            </span>
          </div>

          <div class="item-top zb-form no-test">
            <el-form-item label="免费时间剩余" label-width="126px" class="short-input-item mb0">
              <el-input
                type="number"
                placeholder
                v-model.number="operatorParkConfigInfo.remainFreeParkingTime"
              ></el-input>
            </el-form-item>
            <span class="unit">分钟，进行计费倒计时提示</span>
          </div>
        </div>

        <el-form-item size="medium" class="action-box" label-width="30px">
          <el-button plain type="primary" @click="back">取消</el-button>
          <el-button type="primary" @click="testForm">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import pageScript from "./index.js";
export default pageScript;
</script>

<style lang="less">
@import "../../../../../assets/less/base/zbForm.less";
</style>

<style lang="less" scoped>
@import "./index.less";
</style>

<style lang="less">
.top-action {
  .el-input {
    .el-input-group__append:hover {
      background: #5995d8;
      border-color: #5995d8;
      color: #fff;
    }
  }
}

.forceCovertConfigVoList-box {
  .el-form-item {
    &.is-search-item {
      .el-input__inner {
        color: #f04949;
      }
    }
  }
}
</style>
